<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="16">
          <a-col :xl="5" :lg="7" :md="8" :sm="24">
            <a-form-item label="名称">
              <a-input placeholder="输入名称模糊查询" v-model="queryParam.topicName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="审核状态">
              <a-select allowClear placeholder="请选择审核状态" v-model="queryParam.checkResult">
                <a-select-option :value="-1">全部</a-select-option>
                <a-select-option :value="0">待审核</a-select-option>
                <a-select-option :value="1">已通过</a-select-option>
                <a-select-option :value="2">未通过</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="9" :md="10" :sm="24">
            <a-form-item>
              <a-button-group style="margin-bottom: 24px;">
                <a-button :type="queryParam.timeType == 0?'primary':''" @click="timeTypeChange(0)">全部</a-button>
                <a-button :type="queryParam.timeType == 1?'primary':''" @click="timeTypeChange(1)">当天</a-button>
                <a-button :type="queryParam.timeType == 2?'primary':''" @click="timeTypeChange(2)">本周</a-button>
                <a-button :type="queryParam.timeType == 3?'primary':''" @click="timeTypeChange(3)">本月</a-button>
              </a-button-group>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="7" :md="8" :sm="24">
            <a-form-item>
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
    </div>

    <!-- 操作按钮区域 -->
    <div class="total">
      <div class="total_count">
        <div class="top">个人总量：{{totalData.myTotal}}</div>
        <div class="item">通过量：{{totalData.myPass}}</div>
        <div class="item">不通过量：{{totalData.myFail}}</div>
      </div>
      <div class="total_count">
        <div class="top">部门总量：{{totalData.departTotal}}</div>
        <div class="item">通过量：{{totalData.departPass}}</div>
        <div class="item">不通过量：{{totalData.departFail}}</div>
      </div>
      <div class="total_count">
        <div class="top">全部总量：{{totalData.total}}</div>
        <div class="item">通过量：{{totalData.totalPass}}</div>
        <div class="item">不通过量：{{totalData.totalFail}}</div>
      </div>
      <div>
      </div>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
               :pagination="ipagination" :loading="loading"
               :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" @change="handleTableChange">
        <span slot="action" slot-scope="text, record">
          <template v-if="record.checkResult!=1">
            <a @click="handleEdit(record)" title="编辑">
            <a-icon type="edit" theme="filled"/></a>
          <a-divider type="vertical"/>
          </template>
          <a-popconfirm title="确定删除吗?" @confirm="() => deleteItem(record.id)">
            <a title="删除">
              <a-icon type="delete" theme="filled" style="color:#ed7770"/></a>
          </a-popconfirm>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <tasTopicInfo-modal ref="modalForm" @ok="refresh"></tasTopicInfo-modal>
  </a-card>
</template>

<script>
  import TasTopicInfoModal from './modules/TasTopicInfoModal'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {getAction} from '@/api/manage'
  import {findTopicTypeName, findTopicCheckResultName} from "@/utils/xinkeUtil";
  import Template1 from "../jeecg/JVxeDemo/layout-demo/Template1";

  export default {
    name: 'TopicList',
    mixins: [JeecgListMixin],
    components: {Template1, TasTopicInfoModal},
    data() {
      return {
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '部门名称',
            align: 'center',
            dataIndex: 'departName'
          },
          {
            title: '作者',
            align: 'center',
            dataIndex: 'author'
          },
          {
            title: '创建日期',
            align: 'center',
            dataIndex: 'createTime'
          },
          {
            title: '选题名称',
            align: 'center',
            dataIndex: 'topicName'
          },
          {
            title: '选题类型',
            align: 'center',
            dataIndex: 'topicType',
            customRender: function (t, r, index) {
              return findTopicTypeName(t)
            }
          },
          {
            title: '选题描述',
            align: 'center',
            dataIndex: 'topicDesc'
          },
          {
            title: '审核结果',
            align: 'center',
            dataIndex: 'checkResult',
            customRender: function (t) {
              return findTopicCheckResultName(t)
            }
          },
          {
            title: '审核说明',
            align: 'center',
            dataIndex: 'checkContent',
          },
          {
            title: '备注',
            align: 'center',
            dataIndex: 'remark'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: {
              customRender: 'action'
            }
          }
        ],
        url: {
          list: 'task/innerTopic/myInnerTopic',
          delete: 'task/innerTopic/deleteInnerTopic',
          getTotal: 'task/innerTopic/innerTopicData'
        },
        topicList: [],
        queryParam: {
          timeType: 0,
          topicName: '',
          checkResult: -1
        },
        totalData: {}
      }
    },
    created() {
      this.loadTotal();
    },
    methods: {
      refresh(){
        this.loadTotal();
        this.loadData(1);
      },
      loadTotal() {
        getAction(this.url.getTotal).then(res => {
          if (res.success) {
            this.totalData = res.result
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
        })
      },
      timeTypeChange(timeType) {
        this.queryParam.timeType = timeType;
        this.loadData(1);
      },
      searchReset() {
        this.queryParam = {timeType: 0, checkResult: -1};
        this.loadData(1);
      },
      deleteItem(id) {
        getAction(this.url.delete, {id}).then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.loadData();
            this.loadTotal();
          } else {
            this.$message.warning(res.message);
          }
        });
      }
    }
  }
</script>

<style scoped>
  @import '~@assets/less/common.less';

  .query_time_list {
    display: flex;
    height: 30px;
    line-height: 30px;
    background-color: white;
  }

  .query_time_list .item {
    flex: 1;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
  }

  .query_time_list .selected {
    background-color: #b3d4fc;
  }

  .total_count {
    background: linear-gradient(to right, #0b99e5, #8bcef1);
    width: 300px;
    height: 150px;
    color: white;
    padding: 20px;
    border-right: 10px;
    margin-top: 10px;
    margin-right: 10px;
  }

  .total_count .top {
    text-align: left;
    font-size: 18px;
    margin-top: 20px;
  }

  .total_count .item {
    margin: 10px 20px 0 0;
    text-align: left;
    float: left;
  }

  .total {
    height: 160px;
    display: flex;
    margin-bottom: 24px;
  }
</style>
